<template>
  <div class="limiter">
    <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg')">
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="onSubmit" class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Hello</span>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号码">
            <van-field
              class="input100"
              v-model="mobile"
              name="mobile"
              label=""
              placeholder="手机号码"
              :rules="[{ required: true, message: '请填写正确的手机号码', pattern }]"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
            <van-field
              class="input100"
              v-model="password"
              type="password"
              name="password"
              label=""
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn">登 陆</button>
          </div>
            
          <div class="text-center w-full p-t-25 p-b-130"></div>

          <div class="text-center w-full">
              <router-link class="txt1" to="/business/base/register">
                  立即注册
              </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter()
const mobile = ref('13060808044')
const password = ref('root')
const pattern = ref(/^1[3|4|5|6|7|8|9]\d{9}$/)

const onSubmit = async(val) =>{
  let result = await Api.login(val);
  if(result.code == 1){
    cookies.set("LoginUser", result.data);
      //设置cookie
      showNotify({ type: 'success', message: result.msg,
        onClose: ()=>{
          router.push('/business/base/index')
        }
      });
    } else {
      showNotify({ type: 'danger', message: result.msg });
    }
}
</script>
<style scoped>
/* scoped 样式只在当前页面生效 */
@import url("/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css");
@import url("/assets/css/util.css");
@import url("/assets/css/main.css");
.input100{
  line-height: 50px;
  min-height: 50px;
  height: auto;
}
</style>
